import React from 'react';

import View from 'lib/View.jsx';
import Card from 'lib/components/card.jsx'
import ChartWidget from 'lib/components/ChartWidget.jsx';
import Tab from 'lib/components/tab.jsx';
import GridWidget from 'lib/components/GridWidget.jsx';

import SingleScope from './SingleScope.es6';

export default class SingleView extends View {
  constructor(props, context) {
    super(props, context);
  } // constructor

  render() {
    return (
      <div className="box">
        <Card
          title={
            <div style={{
              display: 'block',
              whiteSpace: 'nowrap',
              overflowX: 'hidden',
              textOverflow: 'ellipsis'
            }} data-tip={this.state.title}>{this.state.title}</div>
          }
          className="widget-float"
          extra={<a className="close iconfont" href="#/">&#xe638;</a>}>
          <div className="pure-g">
            <div className="pure-u-1">
              <div className="box">
                <Card title={
                  <span>
                    平均响应时间
                    <i className="iconfont" data-tip="展示平均响应时间 TOP5 的域名 / URL 请求的趋势信息">&#xe663;</i>
                  </span>
                }>
                  <ChartWidget store={this.state.chart0} />
                </Card>
              </div>
            </div>
          </div>
          <div className="pure-g">
            <div className="pure-u-1">
              <div className="box">
                <Card title={
                  <span>
                    响应次数
                    <i className="iconfont" data-tip="响应次数 TOP5 的域名 / URL 请求的趋势信息">&#xe663;</i>
                  </span>
                }>
                  <ChartWidget store={this.state.chart1} />
                </Card>
              </div>
            </div>
          </div>
          <div className="pure-g">
            <div className="pure-u-1">
              <div className="box">
                <Card title={
                  <span>
                    错误率
                    <i className="iconfont" data-tip="错误率 TOP5 的域名 / URL 请求的趋势信息">&#xe663;</i>
                  </span>
                }>
                  <ChartWidget store={this.state.chart2} />
                </Card>
              </div>
            </div>
          </div>
          <div className="pure-g">
            <div className="pure-u-1">
              <div className="box">
                <Card>
                  <Tab>
                    <Tab.Panel title="错误请求">
                      <GridWidget cols={this.state.requestColumns} store={this.state.errorRequest} />
                    </Tab.Panel>
                    <Tab.Panel title="慢请求">
                      <GridWidget cols={this.state.requestColumns} store={this.state.slowlyRequest} />
                    </Tab.Panel>
                  </Tab>
                </Card>
              </div>
            </div>
          </div>
        </Card>
      </div>
    );
  } // render
}

SingleView.defaultProps = {
  Scope: SingleScope
}
